<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <!--react Vue中的key的作用(key的内部原理)
    
1.虚拟DOM中的key的作用:
                key是虚拟DOM对象的标识，当数据发生变化时，vue会根据新数据生成新的虚拟DOM,
                随后vue进行新的虚拟DOM与旧虚拟DOM的差异比较，比较规则如下:
2.对比规则:

            (1)旧虚拟DOM中找到了与新虚拟DOM相同的key
                ...若虚拟DOM中内容没变，直接复用之前的真实DOM
                ...若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

            (2)旧虚拟DOM中未找到与新虚拟DOM相同的key
                ...创建新的真实DOM,随后渲染到页面

3.用index作为key可能会引发的问题
            1.若对数据进行:逆序添加，逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 （页面展示结果不会有变化，但是渲染效率低）
            2.如果结构中还包含输入类的DOM  ：会产生错误DOM更新
            
4.开发中最好使用每条数据的卫衣标识作为key,比如:ID 手机号，身份证号等
5.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
                        
    -->

    <div id="root">
        <!--当绑定的k值为索引时
              页面渲染的真实DOM中不存在key，key作为一个唯一的标识符，只有vue本身再用  ,在转换成真实DOM时，Vue干掉了唯一标识符key
        -->
        <ul>
            <li v-for="(item,index) in lists" :key="id">
                {{item.name}}{{item.age}}
                <input type="text">
            </li>
        </ul>

        <button @click="add">添加周杰伦2.0</button>


    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                lists: [{
                    id: "01",
                    name: "魏卫浩",
                    age: '18'
                }, {
                    id: "02",
                    name: "邓紫棋",
                    age: '30'
                }, {
                    id: "03",
                    name: "周杰伦",
                    age: '40'
                }],
            },
            methods: {
                add: function() {
                    const z = {
                            id: '04',
                            name: "周杰伦2.0",
                            age: "42"
                        },
                        //  console.log(this)
                        lists = this.lists.unshift(z)
                        //lists = this.lists.push(z)
                }

            },

        })
    </script>
    <style>

    </style>
</body>

</html>